<template>
    <div>
        <template v-for="menu in this.menuData">
            <el-submenu :key="menu.id" :index="menu.id+''" v-if="menu.children.length!==0">
                <template slot="title">
                    <i style="font-size: 18px;" :class="menu.icon"></i>
                    <span slot="title">{{menu.name}}</span>
                </template>
                <Menu-tree :menuData="menu.children"></Menu-tree>
            </el-submenu>
            <el-menu-item :key="menu.id" :index="menu.path" v-else>
                <i style="font-size: 18px;" :class="menu.icon"></i>
                <span slot="title">{{menu.name}}</span>
            </el-menu-item>
        </template>
    </div>
</template>

<script>
    export default {
        props: {
            menuData:[],
        },
        name: 'MenuTree'
    }
</script>
<style scoped>

    /*子菜单悬停颜色*/
    .el-menu-item:hover {
        background-color: #001528 !important;
    }

    /*菜单父级悬停颜色*/
    .el-submenu /deep/ .el-submenu__title:hover {
        background-color: rgb(45, 61, 81) !important;
    }

    /*.el-menu-item.is-active {*/
    /*    background-color: #001528 !important;*/
    /*}*/
    /*子菜单的背景色*/
    .el-menu-item {
        background-color: #1F2D3D
    }
    /*隐藏文字*/
    .el-menu--collapse .el-submenu__title span {
        display: none;
    }
    /*隐藏 > */
    .el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
        display: none;
    }
</style>
